<template>
  <div class="my-project-layout source_data_container">
    <div class="source_data_title">数据准备</div>
    <div class="source_data_subTitle">数据准备阶段包含从原始数据到形成最终数据集的所有操作，包括：表、数据清洗和转换、语义层定义以及数据集定义。</div>
    <div class="source_data_content">
      <div class="source_data_item" @click="handleShowDetail('api')">
        <div class="item-bg api_bg"></div>
        <div class="mask slide-all">
          <div class="taskbg"></div>
          <div class="content slide-all"><span class="item-title">API</span>
            <p class="item-desc slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item" @click="handleShowDetail('sql')">
        <div class="item-bg sql_bg"></div>
        <div class="mask slide-all">
          <div class="taskbg"></div>
          <div class="content slide-all"><span class="item-title">SQL</span>
            <p class="item-desc slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item" @click="handleShowDetail('csv')">
        <div class="item-bg csv_bg"></div>
        <div class="mask slide-all">
          <div class="taskbg"></div>
          <div class="content slide-all"><span class="item-title">CSV</span>
            <p class="item-desc slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item" @click="handleShowDetail('etl')">
        <div class="item-bg "></div>
        <div class="mask slide-all">
          <div class="taskbg"></div>
          <div class="content slide-all"><span class="item-title">ETL</span>
            <p class="item-desc slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "my-data-index",
  setup() {
    const router = useRouter();
    const handleShowDetail = (val) => {
      console.log(val);
      router.push({path:val})
    };
    return {
      handleShowDetail
    };
  }
});
</script>

<style lang="less" scoped>
.source_data_container {
  padding: 20px;
  margin-top: 40px;

  .source_data_title {
    text-align: center;
    font-size: 24px;
    font-weight: bolder;
  }

  .source_data_subTitle {
    text-align: center;
    color: #ccc;
  }

  .source_data_content {
    display: flex;
    justify-content: space-around;
    margin: 30px 0 20px;

    .source_data_item {
      width: 16vw;
      height: 38vh;
      text-align: center;
      margin: 0 1.46vw;
      position: relative;
      cursor: pointer;

      .item-bg {
        width: 100%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .api_bg {
        background-image: url("../../../assets/png/API.png");
      }

      .sql_bg {
        background-image: url("../../../assets/png/SQL.png");
      }

      .csv_bg {
        background-image: url("../../../assets/png/CSV.png");
      }

      .mask {
        background-color: rgba(0, 0, 0, .3);
        top: auto;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        float: left;
        text-align: center;
        width: 16vw;

        .content {
          overflow: hidden;
          top: auto;
          height: 100%;

          .item-title {
            margin: 0;
            height: 50px;
            line-height: 50px;
            font-size: 1.171vw;
            padding: 0;
            display: inline-block;
          }

          .item-desc {
            line-height: 28px;
            padding: 0 23px;
            text-align: left;
            height: 136px;
            margin-top: 0
          }
        }
      }

      &:hover .mask {
        height: 220px;
      }
    }
  }
}
</style>